﻿@page "/"
@inherits AntComponent

<style>
    .card {display:flex;align-items:center;gap:20px;padding:20px;background:#fff;border-radius:5px;margin-bottom:20px;}
</style>
<div class="container">
    <div class="card">
        <AntAlert Type="info">@text</AntAlert>
        <AntAvatar Src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <AntButton Type="default" Name="Default" OnClick="@OnClick" />
        <AntButton Name="Primary" OnClick="@OnClick" />
        <AntButton Name="Danger" Danger OnClick="@OnClick" />
        <AntButton Name="弹窗对话框" OnClick="AntBlazor.showModal('dialog')" />
        <AntTag Color="blue">blue</AntTag>
        <AntTag Color="#f50">#f50</AntTag>
    </div>
    <div class="card" style="align-items:start;">
        <div>
            <div style="text-align:center;margin-bottom:10px;">
                <AntAlert Type="warning">UserName=@login?.UserName</AntAlert>
            </div>
            <LoginForm Id="formLogin" />
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;">
            <AntRadio Items="@Items" />
            <AntSearch Placeholder="请输入关键字搜索" />
            <AntTextArea Placeholder="请输入备注" />
        </div>
        <AntEmpty />
        <AntResult Title="操作成功" />
        <div style="width:200px;">
            <AntSkeleton />
        </div>
    </div>
    <div class="card">
        <AntPagination TotalCount="500" PageIndex="6" PageSize="10" />
    </div>
</div>

<AntModal Id="dialog" Name="用户登录" Width="400">
    <LoginForm Id="formDialog" />
</AntModal>

@code {
    private string text = "Hello AntBlazor!";
    private Dictionary<string, string> Items = new Dictionary<string, string>
    {
        ["0"] = "男", ["1"] = "女"
    };
    private LoginInfo login = new();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (Request.IsHandler("formLogin"))
        {
            // 获取登录按钮提交的表单数据
            login = Request.GetModel<LoginInfo>();
        }
    }

    private string OnClick => $"AntBlazor.showMessage('error', '{text}')";
}